import React, { PureComponent } from 'react';
import styles from './editProjectModal.less'
import { withRouter } from "react-router";
import PropTypes from 'prop-types'
import { updateProjectName } from '@/services'
import Toast from '@/utils/toast';

export default class EditProjectModal extends PureComponent {

  static propTypes = {
    data: PropTypes.Array
  }

  constructor(props){
    super(props)
    this.state = {
      visible: false,
      data: {},
      name: '',
      type: 0 // 0 完工 1 进行中
    }
  }

  /**
   * @param {Object} 工程数据
   */
  show = (data) => {
    this.setState({ visible: true, data, name: data.projName, type: data.status })
  }

  dismiss = () => {
    this.setState({ visible: false })
  }

  submit = async() => {
    if(!this.state.name) { return Toast.error('请填写工程名称') }
    try {
      const data = await updateProjectName({ projectId: this.state.data.projId, projectName: this.state.name, projectStatus: this.state.type })
      if(data.code===200){
        Toast.success('更新成功');
        this.setState({ visible: false })
        this.props.parantDismiss && this.props.parantDismiss()
        this.props.refresh && this.props.refresh()
      }
    } catch (error) {
      console.log(error)
    }
  }

  render() {
    const { data, visible, name, type } = this.state;
    if(!visible) return null
    return (
      <div className={styles.modal} onClick={(e)=>{ this.dismiss() }}>
        <div className={styles.container} onClick={(e)=>{ e.stopPropagation() }}>
          <div className={styles.title}>编辑名称和状态</div>
          <input className={styles.input} onChange={(e)=>{ this.setState({ name: e.target.value })}} value={this.state.name} />
          <div className={styles.checkbox}>
            <div className={styles.option} onClick={()=>{ this.setState({ type: 0 })}} >
              <div className={styles.circle} style={{ backgroundColor: type==0 ? '#EA3A12' : '#E4E4E4' }}></div>
              <div className={styles.text}>进行中</div>
            </div>
            <div className={styles.option} onClick={()=>{ this.setState({ type: 1 })}}>
              <div className={styles.circle} style={{ backgroundColor: type==1 ? '#EA3A12' : '#E4E4E4' }}></div>
              <div className={styles.text}>完工</div>
            </div>
          </div>
          <div className={styles.btn} onClick={this.submit}>确定</div>
        </div>
      </div>
    )
  }
}